//导入vue-router组件
import { createRouter, createWebHistory } from 'vue-router'
//导入组要路由的组件
import Login from "@/views/Login.vue";
import Main from "@/views/Main.vue";
import Home from "@/views/Home.vue";
import Detail from "@/views/Detail.vue"; //立即加载
//创建路由实例
const router = createRouter({
  //采用的是历史模式，还有一种是hash模式，路径中带#
  history: createWebHistory(import.meta.env.BASE_URL),
  /*路由数组*/
  routes: [
    {
      path:'/',
      redirect:'/login' //重定向
    },
    {
      path:'/login',
      name:'login',
      component:Login
    },
    {
      path: '/home', //路由的地址
      name: 'home',//命名路由
      component: Home,// 路由的组件
      children:[ //二级路由
        {
          path: 'welcome', //首页
          name: 'welcome',
          component: () => import('../views/Welcome.vue')//懒加载
        },
        {
          path: 'news',
          name: 'news',
          component: () => import('../views/News.vue')//懒加载
        },
        {
          path: 'contactMe',
          name: 'contactMe',
          component: () => import('../views/ContactMe.vue')//懒加载
        }
      ]
    },
    {
      path:'/detail/:id',
      name:'detail',
      props: true, //便于传参
      component:  ()=> import('../views/Detail.vue')//懒加载
    }
  ]
})

export default router
